<template>
	<div class='home-younger'>
		<TopNav
			showInform
			color="#00493E"
			msgColor="#01937C"
		/>
		<div class="left">
			<ChildNav  />
		</div>
		<div class="right">
			<div class="slide-card">
				<SlideCard :imgs="slideImgs" />
			</div>
			<div class="title">推荐教程</div>
			<CourseList
				size="238"
				column="4"
				:showTags="false"
			/>
		</div>
	</div>
</template>

<script>
import SlideCard from './components/SlideCard'
import ChildNav from './components/ChildNav'
export default {
  components: {
    SlideCard,
    ChildNav
  },
  data() {
    return {
      slideImgs: [
        'https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/baground/20220308101921701-Rectangle 3.png'
      ]
    }
  },
}
</script>

<style lang='scss' scoped>
.home-younger {
  display: flex;
  height: 100vh;
  padding: 95px 0 10px 40px;
  background-color: #ffffff;

  .right {
    flex: 1;
    padding-right: 40px;
    overflow-x: hidden;
    overflow-y: auto;

    .slide-card {
      margin-bottom: 24px;
      overflow: hidden;
      border-radius: $rLarge;
    }

    .title {
      margin-bottom: 20px;
      font-size: 26px;
      color: #00493e;
    }
  }
}
</style>
